<template>
    <div class="page">
        <leftBar />
        <div class="page_one">
            <div class="position">
                <div class="sub"><em>Main works of industrial design</em>  ID作品</div>
                <div class="title">月度入围作品</div>
            </div>
            <a href="javascript:;" class="backBtn" @click="goPage">
                <i class="el-icon-arrow-left"></i>
            </a>

            <el-carousel indicator-position="outside" height="316px" class="swiper_bd">
                <el-carousel-item v-for="(item,index) in detail.url" :key="index">
                    <img :src="item+'&spec=1000'" :preview="1" :preview-text="detail.title" style="width:100%; height:100%;object-fit:cover;">
                </el-carousel-item>
            </el-carousel>

            <div class="txt">
                <div class="path">
                    <span>{{detail.path}}</span>
                </div>
                <h1>{{detail.title}}</h1>
                <div class="author">{{detail.author}}</div>
                <div class="desc"><label>设计说明：</label>{{detail.desc}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    import leftBar from '@/components/leftBar.vue'
    import {mapState} from 'vuex';
    import { works_detail } from '@/assets/js/getData';
    export default {
        name: 'worksDetail',
        data(){
            return {
                detail:{},
                id:'',
            }
        },
        components: {
            leftBar
        },
        computed:{
			...mapState([
				'worksDetail'
			])
        },
        watch:{
            $route(){
                this.id=this.$route.params.id;
                this.init();
            }
        },
        mounted() {
            if(this.worksDetail){
                this.detail = this.worksDetail;
            }else{
                this.id=this.$route.params.id;
                this.init();
            }
        },
        methods:{
            goPage(){
                this.$router.go(-1);
            },
            async init(){
                const res = await works_detail({data:encodeURI(JSON.stringify({id:this.id}))});
                if(res.code == '0'){
                    this.detail = res.data;
                }else{
                    this.$message({
                        showClose:true,
                        message: res.message,
                        type: 'error'
                    });
                }
            },
        }
    }
</script>

<style scoped>
    .position{position: absolute;right:15px;top:10px;}
    .position .sub{line-height:20px;font-size: 12px;text-align:right;color: #7987a3;}
    .position .sub em{font-style: italic;}
    .position .title{width: 84px;line-height:24px;font-size: 14px;text-align:right;color: #353942;float:right;}

    .backBtn{font-size:20px;width:30px;height:30px;line-height:40px;text-align:center;display:inline-block;background:rgba(0, 0, 0, 0.1);line-height:30px;color:#fff;margin:5px;border-radius:50%;transition:all 0.3s;}
    .backBtn:hover{background:rgba(0, 0, 0, 0.2);}
    .swiper_bd{width:476px;margin:30px auto 0;}
    .swiper_bd >>> .el-carousel__indicators li{margin-right:10px;padding-left:0;padding-right:0;}
    .swiper_bd >>> .el-carousel__indicators .el-carousel__button{height:6px;width:6px;opacity:0.9;}
    .swiper_bd >>> .is-active .el-carousel__button{background:#333;}
    .swiper_bd img{cursor: pointer;}
    .txt{width:476px;margin:0 auto;padding-top:50px;}
    .txt .path span{padding:0 8px;height: 22px;line-height:22px;background: #f1f4f7;font-size:12px;text-align:center;position: relative;display:inline-block;color: #7987a3;}
    .txt .path span:after{content:"";border-top:11px solid transparent;border-bottom:11px solid transparent;
    border-left:11px solid #f1f4f7;position: absolute;right:-11px;top:0;}
    .txt h1{font-size:32px;font-weight:400;margin-top:10px;}
    .txt .author{font-size:20px;margin-top:40px;}
    .txt .desc{color: #7987A3;line-height:22px;margin-top:16px;}
    .txt .desc label{color: #333;}
</style>